<template>
  <div class="app-container">
    <!-- 数字权益卡查看 -->
    <el-dialog :title="title" :visible.sync="visible" width="900px" v-if="visible" append-to-body>
      <div v-loading="loading">
        <div class="head">
          <img class="head_left" :src="info.img" alt="">
          <div class="head_right">
            <p>卡名称：{{info.name}}</p>
            <p>单价：{{info.price}}</p>
            <p>交易哈希：{{info.voucher}}</p>
          </div>
        </div>
        <!-- <el-table :data="billList" stripe border>
          <el-table-column label="序号" type="index" width="55" align="center" />
          <el-table-column label="门店名称" align="center" prop="createTime" :show-overflow-tooltip="true" />
          <el-table-column label="用户等级G1" align="center" prop="createTime" :show-overflow-tooltip="true" />
          <el-table-column label="用户等级G2" align="center" prop="createTime" :show-overflow-tooltip="true" />
          <el-table-column label="用户等级G3" align="center" prop="createTime" :show-overflow-tooltip="true" />
          <el-table-column label="用户等级G4" align="center" prop="createTime" :show-overflow-tooltip="true" />
          <el-table-column label="用户等级V1" align="center" prop="createTime" :show-overflow-tooltip="true" />
          <el-table-column label="用户等级V2" align="center" prop="createTime" :show-overflow-tooltip="true" />
        </el-table> -->
        <!-- <el-table :data="transformData" stripe border ref="tableRef">
          <el-table-column label="序号" align="center" type="index" width="64px" />
          <el-table-column label="门店名称" align="center" prop="shopName" :show-overflow-tooltip="true" />
          <template v-for="(col,indexs) in tableHeader" >
            <el-table-column :prop="col.prop" :label="col.label" :key="indexs"></el-table-column>
          </template>
          <el-table-column label="" align="center" width="120" class-name="small-padding fixed-width">
            
          </el-table-column> 
        </el-table> -->
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    customerCardDetail,
    cardShopList
  } from "@/api/members";

  export default {
    // dicts: ['customer_card_record_type'],
    name: "numDialog",
    data() {
      return {
        // 是否禁用表单
        disabled: false,
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        visible: false,
        // 表单参数
        form: {},
        transformData: [], // 获取到的表格数据
        tableHeader: [], // 表头数据
        loading: false,
        info: {},
      };
    },
    created() {

    },
    methods: {
      /** 打开会员列表弹框 */
      open(id, equityCardId) {
        this.visible = true
        this.getCustomerCardDetail(id)
        // this.getCardShopList(equityCardId)
      },
      //获取权益卡详情
      getCustomerCardDetail(id) {
        this.loading = true
        customerCardDetail(id).then(response => {
          this.info = response.result;
          this.loading = false
        }).catch((res) => {
          this.loading = false
        })
      },
      //获取数字权益卡门店权益列表
      getCardShopList(id) {
        this.loading = true
        let data = {
          // id: '1563078377039073280'
          id: id
        }
        cardShopList(data).then(response => {
          // this.billList = response.data;
          let headList = []
          // let obj2 = {
          //   label: '门店名称',
          //   prop: 'shopName'
          // }
          response.data.levelColumnList.forEach((item, index) => {
            var obj = {}
            obj.label = '用户等级' + item
            obj.prop = 'level' + index
            headList.push(obj)
          });
          // headList.unshift(obj2)
          this.tableHeader = headList
          console.log(headList)
          this.transformData = response.data.shopList
          this.$nextTick(() => {
            this.$refs.tableRef.doLayout() //对table做出刷新操作 doLayout
          })
          this.loading = false
        }).catch((res) => {
          this.loading = false
        })
      },
      // 取消按钮
      cancel() {
        this.visible = false;
      },

    }
  };

</script>
<style lang="scss" scoped>
  .head {
    display: flex;
    align-items: center;
    border: 1px solid #f4f4f4;
    border-radius: 4px;
    padding: 10px;
    margin-bottom: 20px;
  }

  .head_left {
    width: 200px;
    height: 116px;
    border-radius: 4px;
    margin-right: 20px;
  }

  .head_right p {
    margin: 0 0 10px 0;
  }

</style>
